<template>
  <div class="index">
    <search class="search"></search>
    <van-pull-refresh v-model="state.loading" @refresh="onRefresh">
      <InfoCardList :list="cardList" v-if="cardList.length > 0"></InfoCardList>
      <div v-else>
        <van-empty description="没有更多了" />
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup lang='ts'>
import search from '@/components/search.vue';
import InfoCardList from '@/components/InfoCardList.vue';
import { onMounted } from 'vue';

import { userStore } from '@/store/index'
import { storeToRefs } from 'pinia';
import { reactive } from 'vue';
const user = userStore()
const { cardList } = storeToRefs(user)

const state = reactive({
  active: '',
  loading: false
})

const onRefresh = () => {
  state.loading = true
  setTimeout(() => {
    user.getCardListInfo()
    state.loading = false
  }, 1000);
}
onMounted(() => {
  user.getCardListInfo()
})


</script>

<style lang='less' scoped>
.index {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding-top: 3.375rem;

  .search {
    position: fixed;
    top: 0;
    z-index: 100;
  }
}
</style>
